<template>
	<view class="">
		<radio-group @change="select">
			<view class="u-flex u-row-around u-margin-top-20">
				<radio v-for="(item,index) in radioList" :key="index" color="#EE5A06"
					:class="current==index?'change':''  " :checked="item.checked" :value="item.name" class="radioList">
					<text style="font-weight: bold;">{{item.name}}</text>
				</radio>
			</view>
		</radio-group>
		
		<view style="width: 500rpx;text-align: center;font-size: 40rpx;color: #959595;margin: 40rpx auto;">请输入车牌</view>
		
		
		<u-message-input mode="box" :maxlength="maxlength" width="70" @change="message" :focus="true" :value="codevalue" :disabled-keyboard="true"></u-message-input>
		
		
		<u-keyboard ref="uKeyboard" mode="car" v-model="show" :mask="false" @change="change" :tooltip="false" @backspace="backspace">
			
		</u-keyboard>
		
		<u-button @click="submit" type="primary" :custom-style="{width:'600rpx',marginTop:'40rpx',background:'#E83814'}" shape="circle" :disabled="disabled">提交</u-button>
		
		<state ref='mask' :icon='mask.icon' :iconcolor='mask.iconcolor' tags=' '
		
				:content="mask.content" @ready='ready'></state>
		
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import state from '../../components/state.vue'

	
	export default {
		components: {
		state
				},
		data() {
			return {
				mask:{
					iconcolor:"",
					icon:"",
					content:"",
				},
				radioList: [{
					name: '普通车牌',
					checked: true

				}, {
					name: '新能源车牌',
					checked:false
				}],
				value: "普通车牌",
				current: 0,
				maxlength:7,
				show:true,
				codevalue:"",
				disabled:true,
				firstTag:false
			}
		},
		onLoad() {
			this.userInfo()
			
		},
		methods: {
			userInfo() {
				return new Promise((resolve, reject) => {
					this.$u.api.userInfo().then(res => {	
						if(res.cn.length>7){
							
							// this.current=1;
							// this.maxlength=8;
							// this.radioList[1].checked=true
							
							
						}
						if(res.cn){
							// this.codevalue = res.cn;
							// this.disabled=false;
							// this.show=false;
							
						}else{
							this.firstTag=true
						}
						
						resolve(res)
					
					}).catch(err => {
			
					})
				})
			
			},
			select(e) {

				this.value = e.detail.value;
				this.current = e.detail.value == '普通车牌' ? 0 : 1;
				this.maxlength= e.detail.value == '普通车牌' ? 7 : 8;
				
			},
			message(e){
				
				console.log(e)
			},
			change(e){
				this.codevalue=this.codevalue.concat(e);
				if(this.codevalue.length>0){
					this.$refs.uKeyboard.changeCarInputModetrue()	
				}
				if(this.codevalue.length==this.maxlength){
					this.show=false,
					this.disabled=false
				}
			},
			backspace(){
				this.disabled=true
			    this.codevalue= this.codevalue.slice(0,this.codevalue.length-1)
				if(this.codevalue.length<1){
					this.$refs.uKeyboard.changeCarInputModefalse()
				}
			},
			submit(){
				this.$u.post('/api/user/bindCn', {
				   cn:this.codevalue
				}).then(res => {	
					if(this.firstTag){
						uni.showModal({
							title:"提示",
							content:"绑定成功,是否去充值",
							success:(res)=>{
								if(res.confirm){
									uni.redirectTo({
										url:"/pages/account/index"
									})
								}else{
									uni.navigateBack({
										delta:1
									})
								}
							}
						})
					}else{
						this.mask.iconcolor= '#52C617'
						this.mask.icon= 'checkmark-circle-fill'
						this.mask.content= '绑定成功~！'
						this.$refs.mask.show = true
					}
					
				}).catch(err => {
				  this.mask.iconcolor= '#FF1D1E'
				  this.mask.icon= 'close-circle-fill'
				  this.mask.content= '绑定失败~！'
				  this.$refs.mask.show = true
				})
				
				
			},
		
			
		}
	}
</script>

<style>
	.radioList {
		width: 250rpx;
		height: 78rpx;

		border-radius: 39rpx;
		display: flex;
		justify-content: center;
		transform: scale(0.9);

	}

	.change {
		background: #FEE1CF;
		transition: all 0.3s;
	}
</style>
